<template>
  <div class="page">
    <div class="portal-header">
      <div style="height: 65px;">
        <Header :menus="menus">
          <template slot="left">
            <div class="logo">
              <div class="logo-img">
                <el-image src="https://www.ketangpai.com/images/common/logo_blue.png" alt="logo" class="img" />
              </div>
            </div>
          </template>
          <template slot="right">
            <div v-if="value !== '1'">
              <div class="login">
                <el-button type="primary" @click="login">
                  <span>登录</span>
                </el-button>
              </div>
            </div>
            <div v-if="value === '1'">
              <div class="login">
                <el-button type="primary" @click="ToMain">
                  <span>进入课堂</span>
                </el-button>
              </div>
            </div>
          </template>
        </Header>
      </div>
    </div>
    <div class="page-view">
      <div class="container">
        <div class="carousel" style="background-image: url('https://www.ketangpai.com/img/pai-smart-banner.08fc4600.png');height: 471px;display: flex">
          <div class="carousel-left">
            <img src="https://www.ketangpai.com/img/pai-smart-aibanner.e8581c3e.png" alt="" class="banner">
          </div>
          <div class="carousel-right">
            <img  style="display: inline-block;"  src="">
            <span style=" font-size:24px;font-family: PingFang SC, PingFang SC-Medium;font-weight: 500;">&emsp;PAI智能体平台</span>
            <div class="" style="margin-top:30px;font-size: 24px;font-weight: 400;vertical-align: baseline;font-family: Roboto, Helvetica, Arial, sans-serif;">
              <div >零代码快速搭建</div>
              <div >你的专属Ai教学助手</div>
            </div>
            <div  class="tag-ul-lists">
              <ul>
                <li>个性化定制Agent</li>
                <li >AI工作流</li>
                <li >灵活可扩展</li>
              </ul>
            </div>
            <div class="btn-area" style="margin-top: 40px">
              <button  type="button" class="el-button btn-detail el-button--primary el-button--medium">
                <span>详细了解</span>
              </button>
              <button  type="button" class="el-button btn-concat-us el-button--text el-button--medium" style="border:1px solid #2178ff;padding:10px 20px">
                <span>申请试用</span>
              </button></div>
          </div>
        </div>

        <div class="blendList">
          <div>
            <div class="head">
              <div class="title">混合教学全过程管理</div>
              <div class="detail">课前、课中、课后，线上线下，教学场景全过程管理</div>
            </div>
            <div class="list">
              <ul>
                <li v-for="item in blendList" v-bind:key="item.id">
                  <div class="headimg">
                    <el-image :src="item.src" class="img">
                      <div slot="placeholder" class="image-slot">
                        加载中<span class="dot">...</span>
                      </div>
                    </el-image>
                  </div>
                  <div class="title">{{ item.title }}</div>
                  <div class="detail">{{ item.detail }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div class="wisdom">
          <div class="head">
            <div class="title">智慧教学平台</div>
          </div>
          <div class="list">
            <ul>
              <li v-for="item in wisdomList" v-bind:key="item.id">
                <div class="headImg">
                  <el-image :src="item.src" class="img">
                    <div slot="placeholder" class="image-slot">
                      加载中<span class="dot">...</span>
                    </div>
                  </el-image>
                </div>
                <div class="title">{{ item.title }}</div>
                <div class="detail">{{ item.detail }}</div>
              </li>
            </ul>
          </div>

          <div class="understand">
            <div class="content">
              <button class="und">了解详细功能</button>
              <button class="now" @click="register">立即注册体验</button>
            </div>
          </div>
        </div>

        <div class="mechanisnm">
          <div>
            <div class="head">
              <div class="title">课堂派机构版</div>
            </div>
            <div class="content">
              <div class="mecleft">
                <el-image :src="'https://www.ketangpai.com/img/mecShow.7f324bbf.png'" class="img">
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
              </div>
              <div class="mecright">
                <ul>
                  <li v-for="item in mechanisnmList" v-bind:key="item.id">
                    <div class="title">
                      <div class="choose">
                        <el-image :src="require('../../assets/homePage/choose.png')" class="img">
                          <div slot="placeholder" class="image-slot">
                            加载中<span class="dot">...</span>
                          </div>
                        </el-image>
                      </div>
                      <div class="content">{{ item.content }}</div>
                    </div>
                    <div class="detail">{{ item.detail }}</div>
                  </li>
                </ul>
                <div class="rightButton">
                  <button class="und">了解详细功能</button>
                  <button class="now">申请免费试用</button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="media">
          <div class="head">
            <div class="title">媒体报道</div>
          </div>
          <el-carousel :autoplay="false" arrow="never" indicator-position="outside" type="card" height="400px">
            <el-carousel-item v-for="(item, index) in mediaList" :key="index">
              <div class="item-content">
                <el-image :src="item.src" class="img">
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
                <div class="newContent">
                  <p class="title">{{ item.title }}</p>
                  <p class="content">{{ item.content }}</p>
                  <el-button type="primary">查看详情</el-button>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>

        <div class="welcome">
          <div class="show">
            <div class="content">
              <div class="head">欢迎使用课堂派</div>
              <div class="detail">精彩教学，从这里开启</div>
              <div class="buttonContent">
                <button class="lian">联系课堂派</button>
                <button class="free" @click="register">免费注册</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="portal-footer">
        <div class="layer-one">
          <div class="left">
            <div class="bottom-logo">
              <img src="../../assets/homePage/课堂派.png" alt="logo" class="img">
            </div>
            <ul>
              <li v-for="(item, index) in bottomList" :key="index">
                <a href="#">{{ item.name }}</a>
              </li>
            </ul>
          </div>
          <div class="right">
            <div class="contact">
              <p>联系我们</p>
              <p>(工作日09:30~18:30)</p>
              <p>
                <img src="../../assets/homePage/phone.png" alt="电话" class="img" />010-57748642
              </p>
              <p>
                <img src="../../assets/homePage/email.png" alt="邮箱" class="img" />hi@ketangpai.com
              </p>
            </div>
            <div class="qrcode">
              <img src="https://www.ketangpai.com/img/paipaikefu.bf408c12.png" alt="派派" width="120px">
              <p>课堂派客服-派派</p>
            </div>
            <div class="qrcode">
              <img src="https://www.ketangpai.com/img/portalQRcode.24a37b5d.png" alt="移动教学" width="120px">
              <p>扫码开启移动教学</p>
            </div>
          </div>
        </div>
        <div class="layer-two">
          <span>
            Copyright © 2014 ketangpai.com All Rights Reserved.
            <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/recordQuery">京ICP备14023276号-4</a>
          </span>
          <span>
            <a target="_blank" href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011402010566">京公网安备
              11011402010566号</a>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "../../components/Header.vue";


export default {
  name: 'homePage',
  computed: {
    // url() {
    //   return url
    // }
  },
  components: {
    Header,
  },
  data() {
    return {
      value: localStorage.getItem('loginStatus'),
      menus: [
        {
          name: "首页",
          route: "/homePage"
        },
        {
          name: '产品功能',
          route: '/productFunction'
        },
        {
          name: '解决方案',
          route: '/mechanism'
        },
        {
          name: '渠道合作',
          route: '/cooperation'
        },
        {
          name: '会员权益',
          route: '/vipPower'
        },
        {
          name: '帮助中心',
          route: '/helpCenter'
        },
        {
          name: 'Ai工具集',
          route: '/aiTool'
        }
      ],
      image: [
        {
          src: 'https://www.ketangpai.com/img/pai-smart-banner.08fc4600.png',
          alt: '课堂派首页'
        },
      ],
      blendList: [
        {
          id:0,
          src: 'https://www.ketangpai.com/img/task.a6436aca.png',
          title: '作业',
          detail: '81 种文档格式作业在线展示和批阅，实时查重，精准对比，避免学生抄袭。 自动管理成绩，一键下载作业数据。'
        },
        {
          id:1,
          src: require('../../assets/homePage/考试练习.png'),
          title: '考试/练习',
          detail: '单选、多选、填空、简答等10余种题型。支持题库随机抽题组卷。支持限时考试、选项随机等防作弊模式。'
        },
        {
          id:2,
          src: require('../../assets/homePage/课件资料.png'),
          title: '课件资料',
          detail: '课件、资料、话题、公告等教学内容支撑。在线制作方便快捷，提升备课效率。支持课前发布活动，课中互动，课后巩固。'
        },
        {
          id:3,
          src: require('../../assets/homePage/课中互动.png'),
          title: '课中互动',
          detail: '课件在线讲解、标记疑问 支持发言、开启弹幕、抢答、提问、话题讨论、黑板、画笔标注课堂要点，让课堂更精彩。'
        },
        {
          id:4,
          src: require('../../assets/homePage/考勤签到.png'),
          title: '考勤签到',
          detail: '二维码、数字口令、GPS等5种考勤形式， 精准有效、避免代签 签到数据自动生成，一键导出。'
        },
        {
          id:5,
          src: require('../../assets/homePage/成绩管理.png'),
          title: '成绩管理',
          detail: '汇总互动数据、平时成绩、期末成绩 个性化配置成绩权重占比数据报表一键导出下载，课留存，可追溯。'
        },
        {
          id:6,
          src: require('../../assets/homePage/教学数据分析.png'),
          title: '教学数据分析',
          detail: '全方位教学数据信息化，可视化实时监测教学质量，把控教学进度，学业预警分析，提升教学效果。'
        },
        {
          id:7,
          src: require('../../assets/homePage/直播-云录屏.png'),
          title: '直播-云录屏',
          detail: '满足线上线下混合式教学场景 动画及课件同屏+语音实现轻量级直播 不限人员数量，手机电脑均可参与。'
        },
      ],
      wisdomList: [
        {
          src: require('../../assets/homePage/线下互动课堂.png'),
          title: '线下互动课堂',
          detail: '多种互动教学工具，沉浸式学习体验，精准化学习。'
        },
        {
          src: require('../../assets/homePage/混合教学全过程管理.png'),
          title: '混合教学全过程管理',
          detail: '课前课中课后全过程教学管理，教学数据可视化，可留存，提升教学质量。'
        },
        {
          src: require('../../assets/homePage/在线直播教室.png'),
          title: '在线直播教室',
          detail: '在线直播教学搭配教学互动，充分还原真实的教学场景，提升教学效果。'
        },
        {
          src: require('../../assets/homePage/在线课程建设.png'),
          title: '在线课程建设',
          detail: '在线直播课、精品慕课资源、课程资源体系搭建，沉淀教学资源。'
        },
      ],
      mechanisnmList: [
        {
          id:0,
          content: '精准高效管理教学事务',
          detail: '一键对接教务系统，精准高效管理师生教学、课程、课务。'
        },
        {
          id:1,
          content: '有效提升教学质量',
          detail: '以课堂教学为核心，以产出为导向；实时监控师生、课程、教学活动等教学过程。'
        },
        {
          id:2,
          content: '教学资产管理',
          detail: '沉淀教学过程资产，促进优质课程、资源、知识图谱建设。'
        },
        {
          id:3,
          content: '智慧校园全景定制',
          detail: '以学生为中心，以教学为导向，提供校园全景智慧教学解决方案。'
        },
      ],
      mediaList: [
        {
          id:0,
          src: 'https://assets.ketangpai.com//Public/Common/img/5.png',
          title: '助力智慧课堂：课堂派成为腾讯微校生态战略伙伴',
          content: '7月18日，腾讯微校发布会在北京船山书院如期举行，正式推出以微信校园卡、腾讯校园码为核心的数字校园解决方案——腾讯微校2.0。本次发布会突破传统Q&A的传统模式，现场模拟校园场景，利用“一款非常好用的应用”课堂派进行了现场互动。作为腾讯微校的生态战略伙伴，互动教学品牌课堂派展现了科技时代，智慧课堂所带来的创新和变化。'
        },
        {
          id:1,
          src: '	https://assets.ketangpai.com//Public/Common/img/4.png',
          title: '课堂派亮相2018中国“互联网+”数字经济峰会',
          content: '4月12日下午教育分论坛，北京大学软件与微电子学院林院长分享了智慧课堂的建设经验：教学资源呈现多样化、课堂形式丰富、如何把学生从玩手机的屏幕聚焦到课堂互动环节等方面。林院长表示，课堂派在研发过程中，学院的一线教师主动参与，把很多丰富的实际教学经验融入研发当中，使整个智慧课堂的建设更具实用性和前瞻性。'
        },
        {
          id:2,
          src: 'https://assets.ketangpai.com//Public/Common/img/6.png',
          title: '新时代新青年 课堂派创始人陈杰宾的创业梦',
          content: '6月26日，中国共产主义青年团第十八次全国代表大会在人民大会堂开幕。共青团委对福建省驻京团工委点赞，CCTV新闻频道进行了同步报道。分享会上，课堂派创始人陈杰宾作为闽籍创业青年代表，向在京青年创业者分享了课堂派的发展模式以及创业历程。'
        },
        {
          id:3,
          src: 'https://assets.ketangpai.com//Public/Common/img/2.png',
          title: '【新浪新闻】课堂派云管理颠覆高校传统实习模式',
          content: '用课堂派最大的好处就是在学习的过程中，随时跟老师进行沟通和分享，无论从知识和情感层面都需要倾诉，而课堂派不仅提供跟老师同学交流的机会，还能够获得别人的指导和鼓励，让整个学习过程更加轻松。'
        },
        {
          id:4,
          src: 'https://assets.ketangpai.com//Public/Common/img/4.png',
          title: '【华北电力大学】“互联网+”让教育发现每一个学生',
          content: '“课堂上教师要及时了解学生对内容的掌握程度，课下学生也希望教师能对自己的学习困难进行及时的指导。”在以前，这些实现起来比较困难的事情，“课堂派”可以让这一切变得轻而易举。'
        }
      ],
      bottomList: [
        {

          name: '关于我们'
        },
        {
          name: '服务条款'
        },
        {
          name: '产品动态'
        },
        {
          name: '浏览器下载'
        },
      ],
    }
  },
  methods: {
    login() {
      this.$router.push('/login');
    },
    register() {
      this.$router.push('/register');
    },
    ToMain() {
      console.log(this.$route.path)
      // this.$router.push('/main');
      this.$router.push('/main').catch(err => {
        if (err.name === 'NavigationDuplicated') {
          // 忽略冗余导航的错误
        } else {
          // 处理其他错误
          console.error(err);
        }
      });
    },

  }
}
</script>

<style scoped lang="less">
.page {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-width: 1224px;
  overflow: visible;

  .portal-header {
    width: 100%;
    box-shadow: 0 1px 0 0 #dfdfdf;
    background: #fff;

    >div {
      width: 1224px;
      margin: 0 auto;

      .logo {
        display: flex;
        margin-right: 48px;

        .logo-img {
          width: 128px;
          padding: 17px 0;
          cursor: pointer;
          margin: 0 auto;

          .img {
            width: 128px;
          }
        }
      }
    }

    .login {

      button {
        font-weight: 500;
        margin-left: 278px;
        background: linear-gradient(131deg, #7eb0ff, #2178ff);
        border: none;

        span {
          outline: none;
        }
      }
    }
  }

  .page-view {
    overflow-y: auto;

    .container {
      margin: 0 auto;

      .carousel {
        width: 100%;
        height: 470px;

        .img {
          width: 100%;
          height: 470px;
          background-position: 50%;
          background-size: cover;
          background-repeat: no-repeat;
        }
      }

      .blendList {
        background: linear-gradient(180deg, #fff, #f4f8ff 42%);

        >div {
          height: 952px;
          width: 1224px;
          margin: 0 auto;
        }

        .head {
          text-align: center;
          padding: 64px 0 40px;

          .title {
            font-size: 40px;
            font-weight: 500;
            color: #1f2023;
          }

          .detail {
            height: 32px;
            font-size: 20px;
            color: #74787c;
            margin-top: 16px;
          }
        }
      }

      .list {
        padding: 0;

        ul {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;

          li {
            height: 240px;
            text-align: center;
            width: 240px;
            background: linear-gradient(180deg, #fff, #f4f8ff 130%);
            border-radius: 8px 8px 0 8px;
            margin-top: 24px;
            padding: 40px 24px;
            list-style: none;

            .headimg {
              width: 64px;
              margin: 0 auto;
              height: 64px;
              margin-bottom: 24px;

              .img {
                width: 64px;
                height: 64px;
                display: block;
                margin: 0 auto;
              }
            }

            .title {
              font-weight: 600;
              color: #1f2023;
              font-size: 24px;
              margin-bottom: 8px;
            }

            .detail {
              font-size: 14px;
              color: #74787c;
              line-height: 24px;
            }
          }
        }
      }

      .wisdom {
        width: 1200px;
        margin: 0 auto;
        height: 614px;

        .head {
          text-align: center;
          padding: 64px 0;

          .title {
            font-size: 40px;
            font-weight: 500;
            color: #1f2023;
          }
        }

        .list {
          padding: 0;

          ul {
            display: flex;
            justify-content: space-between;
            align-items: center;
            list-style-type: none;

            li {
              width: 228px;
              height: 262px;
              padding: 0 30px;
              text-align: center;
              border-radius: 4px;
              box-shadow: 20px 20px 100px -63px #8297b2;
            }

            .headImg {
              width: 64px;
              margin: 0 auto;
              height: 64px;
              margin-bottom: 32px;
              margin-top: 24px;

              .img {
                width: 64px;
                height: 64px;
                display: block;
                margin: 0 auto;
              }

              .title {
                font-weight: 600;
                color: #1f2023;
                font-size: 24px;
                margin-bottom: 8px;
              }

              .detail {
                font-size: 14px;
                color: #74787c;
                line-height: 24px;
              }
            }
          }
        }

        .understand {

          .content {
            margin: 64px auto;
            width: 344px;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;

            button {
              cursor: pointer;
              border-radius: 4px;
              width: 160px;
              height: 48px;
              text-align: center;
              line-height: 48px;
            }

            .und {
              background: #fff;
              border: 1px solid #4285f4;
              color: #4285f4;
            }

            .now {
              background: linear-gradient(131deg, #7eb0ff, #2178ff);
              border: 1px solid #4285f4;
              color: #fff;
            }
          }
        }
      }

      .mechanisnm {
        background: linear-gradient(180deg, #fff, #f4f8ff 42%);

        >div {
          width: 1224px;
          height: 806px;
          margin: 0 auto;
          padding: 0;

          .head {
            text-align: center;
            padding: 64px 0;

            .title {
              font-size: 40px;
              font-weight: 500;
              color: #1f2023;
            }
          }

          .content {
            display: flex;
            justify-content: space-between;

            .mecleft {
              .img {
                width: 625px;
                height: 548px;
              }
            }

            .mecright {
              ul {
                list-style: none;

                li {
                  margin-bottom: 24px;

                  .title {
                    line-height: 36px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    .choose {
                      width: 20px;
                      height: 20px;

                      .img {
                        width: 20px;
                        height: 20px;
                      }
                    }

                    .content {
                      color: #1f2023;
                      font-weight: 600;
                      margin-left: 16px;
                      font-size: 24px;
                    }
                  }

                  .detail {
                    font-size: 18px;
                    margin-top: 8px;
                    color: #74787c;
                    padding-left: 38px;
                    line-height: 32px;
                  }
                }
              }

              .rightButton {
                margin: 64px 0 0 38px;
                width: 344px;
                display: flex;
                justify-content: space-between;
                box-sizing: border-box;

                button {
                  cursor: pointer;
                  width: 160px;
                  height: 48px;
                  text-align: center;
                  line-height: 48px;
                  border-radius: 4px;
                }

                .und {
                  background: #fff;
                  border: 1px solid #4285f4;
                  color: #4285f4;
                }

                .now {
                  background: linear-gradient(131deg, #7eb0ff, #2178ff);
                  border: 1px solid #4285f4;
                  color: #fff;
                }
              }
            }
          }
        }
      }

      .media {
        height: 600px;
        margin: 0 auto;

        .head {
          text-align: center;
          padding: 64px 0;

          .title {
            font-size: 40px;
            font-weight: 500;
            color: #1f2023;
          }
        }

        .item-content {
          padding: 8px;
          position: relative;

          .img {
            height: 320px;
            width: 240px;
            position: absolute;
            left: 38px;
            top: 40px;
            border-radius: 8px;
            z-index: 1;
          }

          .newContent {
            height: 384px;
            box-sizing: border-box;
            background-color: #fff;
            padding: 30px;
            padding-left: 300px;
            border-radius: 5px;
            box-shadow: 0 0 10px #e7ebf0;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;

            ::after {
              content: "";
              width: 8px;
              background: #2178ff;
              border-radius: 0 5px 5px 0;
              position: absolute;
              right: 0;
              top: 40px;
              bottom: 40px;
            }

            .notNow {
              filter: contrast(96%);
            }

            .title {
              font-size: 20px;
              font-weight: 600;
              margin: 0 0 5px;
            }

            .content {
              font-size: 12px;
              line-height: 24px;
              color: #74787c;
            }

            button {
              width: 113px;
              height: 47px;
            }
          }
        }
      }

      .welcome {
        background-image: url('https://www.ketangpai.com/img/welcome-bg.1865e6b9.jpg');
        background-position: 50%;
        height: 400px;
        width: 100%;
        position: relative;
        overflow: hidden;
        margin: 0 auto;
        display: flex;
        justify-content: center;

        .show {
          position: absolute;
          top: 0;
          width: 100%;

          .content {
            width: 336px;
            margin: 0 auto;
            text-align: center;
            color: #fff;

            .head {
              font-weight: 500;
              line-height: 48px;
              font-size: 48px;
              margin-top: 88px;
            }

            .detail {
              font-size: 20px;
              margin-top: 24px;
              margin-bottom: 37px;
            }

            .buttonContent {
              display: flex;
              justify-content: space-around;

              button {
                width: 120px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                border-radius: 4px;
                cursor: pointer;
              }

              .lian {
                color: #fff;
                background: #5293ff;
                box-sizing: border-box;
                border: 1px solid #fff;
              }

              .free {
                background: #fff;
                color: #5293ff;
                border: 1px solid #fff;
              }
            }
          }
        }
      }
    }

    .portal-footer {
      height: 100%;
      padding: 0;
      background-color: #272E38;
      min-width: 1224px;

      .layer-one {
        height: 236px;
        padding: 0 120px;
        display: flex;
        justify-content: space-between;
        background: #272e38;

        .left {
          padding: 65px 0;

          .bottom-logo {
            width: 128px;
            margin-bottom: 8px;

            .img {
              height: 32px;
              width: 128px;
            }
          }

          ul {
            display: flex;
            margin-top: 30px;
            list-style: none;

            li {
              margin-right: 64px;

              a {
                font-size: 14px;
                font-weight: 500;
                color: #fff;
                cursor: pointer;
                text-decoration: none;
              }
            }
          }
        }

        .right {
          display: flex;

          .contact {
            padding: 60px 0;
            margin-right: 20px;

            p {
              font-size: 14px;
              font-weight: 500;
              color: #fff;
              display: flex;

              .img {
                margin-right: 8px;
                width: 20px;
                height: 20px;
                border: none;
              }
            }

            p:nth-child(2) {
              font-size: 14px;
              font-weight: 400;
              color: #6d7790;
              margin-top: 2px;
              margin-left: 5px;
            }

            p:nth-child(3) {
              margin: 16px 0;

            }
          }

          .qrcode {
            padding: 40px 0;
            margin-left: 20px;

            p {
              margin-top: 16px;
              font-size: 14px;
              font-weight: 500;
              color: #fff;
              text-align: center;
            }
          }
        }
      }

      .layer-two {
        width: 100%;
        height: 48px;
        background: #15191f;
        text-align: center;

        span {
          font-size: 12px;
          color: #647184;
          margin-right: 60px;
          line-height: 48px;

          a {
            text-decoration: none;
            color: #647184;
          }
        }
      }
    }
  }
}
.banner{
  width: 600px;
  border: none;
  height: 450px;
  margin: 20px 0;
  margin-left: 200px;
  display: inline-block;
}
.carousel-right{
  margin: 50px 0 0 100px;
}
.tag-ul-lists{
  margin-top: 67px;
}
.tag-ul-lists ul{
  display: flex;
  justify-content: space-between;
  width: 350px;
  list-style: none;
  padding: 0;
  font-weight: 700;
}
</style>
